<template>
  <div class="banner">
     <Header>
				<div class="title"><span class="title-span">个人信息</span></div>
				<div class="back" @click="$router.back()"><van-icon name="arrow-left" /></div>
		</Header>
  <!-- </div> -->
  



  <div class="container">
    <input 
    type="file"
    hidden
    id="file"
    @change="change"
    accept="image/*"
    ref="file"
    />

 
    <!-- <van-form @submit="onSubmit"> -->
  <van-cell title="头像" class="head">
    <label for="file">
       <van-image 
    width="50"
    height="50"
    round
  
    fit="cover"
    :src="userInfo.avatar"
   />
    </label>
   

</van-cell>
  <van-cell 
  title="昵称" 
  is-link
  :value="userInfo.nickname"
  :to="{path:'/edit',query:{nickname:userInfo.nickname}}"
   />

  <van-cell
   title="性别" 
   is-link 
   :value="userInfo.sex || '选择性别'"
   @click="sexPickerShow = true"
   />

   <van-popup 
   v-model="sexPickerShow"
   position="bottom"
   >
   <van-picker
   title="选择"
   show-toolbar
   @confirm="sexPickerConfirm"
   @cancel="sexPickerShow = false"
   :columns="sexColums"

   />
   </van-popup>

  <van-cell 
  title="生日" 
  is-link 
  :value="userInfo.birthday || '选择生日'"
  @click="datePickerShow = true"
  />

  <van-popup 
   v-model="datePickerShow"
   position="bottom"
   >
<van-datetime-picker
  :value="userInfo.birthday?new Date(userInfo.birthday):new Date(2000,1,2)"
  type="date"
  title="选择年月日"
  :min-date="minDate"
  :max-date="maxDate"
  @confirm="datePickerConfirm"
   @cancel="datePickerShow = false"
/>
   </van-popup>


  <div style="margin: 16px;">
    <van-button
     round block type="info"
     class="footer-item" 
     native-type="submit"
     :square="true"

     @click="submit"
     >确定</van-button>
  </div>
<!-- </van-form> -->
 </div>
  </div>
</template>

<script>
import { Toast,NavBar,Form, Field,Cell, CellGroup,Icon,Image, } from 'vant';
import { editUserInfo } from '../../api/user';
import { mapActions } from 'vuex';
import sexPickerMixin from './sexPickerMixin';
import datePickerMixin from './datePickerMixin'

console.log(NavBar)
console.log(Form);
console.log(Field);
console.log(Cell);
console.log(CellGroup);
console.log(Icon);
console.log(Image);




export default {
  name:"user",
  components:{
    [NavBar.name]:NavBar,
    [Form.name]:Form,
    [Field.name]:Field,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [Icon.name]:Icon,
    [Image.name]:Image,
 
  },
  data(){
    return {
      // username:"",
      // password:"",
      userInfo:{},
    }
  },
  mixins:[sexPickerMixin,datePickerMixin],
  watch: {
    '$store.state.userInfo':{
      immediate:true,
      handler(n,o) {
        this.userInfo = JSON.parse(JSON.stringify(n));
        }
    }
  },

  mounted() {
    console.log(this.userInfo)
  },
  activated() {
    let nickname = sessionStorage.getItem('nickname')
    if(nickname) {
     this.userInfo.nickname = nickname
    }
  },
  deactivated() {
     console.log('加入缓存')
  },
  methods: {
    // onClickLeft() {
    //   Toast('');
    // },
   
    // onSubmit(values) {
    //   console.log('submit', values);
    // },
      ...mapActions(['upload']),

      async change(e) {
      // console.log(e.target.files);
      let file = e.target.files[0]
      this.userInfo.file = file;

      let fileReader = new FileReader();
      
      fileReader.readAsDataURL(file);
      fileReader.onload = (e)=> {
       this.userInfo.avatar = e.target.result
      }


    },
    async submit() {
      let {_id,nickname,avatar,file,sex='',birthday=''} = this.userInfo;
      if(file) {
        let fileList = [{
          file,
        }];
        let res = await this.upload(fileList);
        console.log(res);
        avatar = res[0]
      }
      editUserInfo({
        uid:_id,
        nickname,
        avatar,
        sex,
        birthday
      }).then(res=>{
        console.log(res);

        this.$toast(res.msg)
        if(res.code == 0) {
          this.$store.dispatch('getUserInfo',localStorage.getItem('token'))
          
          // this.$store.commit('change', {
          //   key:'userInfo',
          //   value:{
          //     _id,
          //     nickname,
          //     avatar,
          //     sex,
          //     birthday
          //   }
          // })
          
          
          
          setTimeout(v=>{
            this.$router.back()
          },500)
        }
      })
    }
  },
}
</script>

<style lang="less">
.title {
  text-align: center;
  background-color: green;
  height: 45px;
}
.title-span{
  font-size: 20px;
  top: -25px;
  color: white;
  position: absolute;
  margin-top: 30px;
  right: 170px;
}
.back {
  position: absolute;
  margin-top: -30px;
  left: 10px;
}
 .banner-item {
  background-color: green;
 }
 .footer-item {
  background-color: green;
 }

</style>